var searchVue = new Vue({
    el: '#searchAll',
    data: {
        key: keyword,
        articles: [],
        outlines: [],
        teachers: [],
        students: [],
        tabId: 0
    }, methods: {
        init: function () {

        },
        search: function () {
            this.key = this.key.trim();
            console.log(this.key)
            if (this.key == '') {
                return;
            }
            if (this.tabId == 0) {
                this.searchArticle();
            } else if (this.tabId == 1) {
                this.searchOutline();
            } else if (this.tabId == 2) {
                this.searchTeachers();
            } else if (this.tabId == 3) {
                this.searchStudents();
            }
        },
        searchArticle: function () {
            var _this = this;
            $.ajax({
                url: base + '/search/searchArticle',
                type: 'post',
                data: {key: _this.key},
                success: function (result) {
                    result = JSON.parse(result)
                    _this.articles = result;
                }
            })
        },
        searchOutline: function () {
            var _this = this;
            $.ajax({
                url: base + '/search/searchOutlines',
                type: 'post',
                data: {key: _this.key},
                success: function (result) {
                    result = JSON.parse(result)
                    _this.outlines = result;
                }
            })
        },
        searchTeachers: function () {
            var _this = this;
            $.ajax({
                url: base + '/search/searchTeacher',
                type: 'post',
                data: {key: _this.key},
                success: function (result) {
                    result = JSON.parse(result)
                    _this.teachers = result;
                }
            })
        },
        searchStudents: function () {
            var _this = this;
            $.ajax({
                url: base + '/search/searchStudents',
                type: 'post',
                data: {key: _this.key},
                success: function (result) {
                    result = JSON.parse(result)
                    _this.students = result;
                }
            })
        },

        sendMsg: function (stuId) {
            $.ajax({
                url: base + '/conversation/getConId',
                type: 'post',
                data: {stuId: stuId},
                success: function (result) {
                    showModal(result);
                }
            })
        }
    }
});
searchVue.search();
layui.use('element', function () {
    var element = layui.element;
    element.on('tab(searchFilter)', function (data) {
        searchVue.tabId = data.index;
        searchVue.search();
    });
    //…
});

screenFuc();

function screenFuc() {
    var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
    //屏幕小于768px时候,布局change
    var winWidth = $(window).innerWidth();
    if (winWidth <= 768) {
        var totalHeight = $(window).height(); //页面整体高度
        $(".chatBox-info").css("height", totalHeight - topHeight);
        var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
        //中间内容高度
        $(".chatBox-content").css("height", infoHeight - 46);
        $(".chatBox-content-demo").css("height", infoHeight - 46);

        $(".chatBox-list").css("height", totalHeight - topHeight);
        $(".chatBox-kuang").css("height", totalHeight - topHeight);
        $(".div-textarea").css("width", winWidth - 106);
    } else {
        $(".chatBox-info").css("height", 495);
        $(".chatBox-content").css("height", 448);
        $(".chatBox-content-demo").css("height", 448);
        $(".chatBox-list").css("height", 495);
        $(".chatBox-kuang").css("height", 495);
        $(".div-textarea").css("width", 260);
    }
}

(window.onresize = function () {
    screenFuc();
})();

var MsgContent = new Vue({
    el: '#chat',
    data: {
        conId: 1,
        content: []
    },
    methods: {
        init: function () {
            var _this = this;
            $.ajax({
                url: base + '/message/getMessage',
                type: 'post',
                data: {conId: this.conId},
                success: function (result) {
                    result = JSON.parse(result)
                    _this.content = result.reverse();
                }, error: function () {

                }
            });
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        },
        send: function () {
            var _this = this;
            var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
            if (textContent != "") {
                var d = new Date();
                this.content.push({
                    text: textContent,
                    msgTime: d.toLocaleString(),
                    dir: 'right',
                    image: base + imageUrl
                });
                //发送后清空输入框
                $(".div-textarea").html("");
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
                // 保存聊天记录
                $.ajax({
                    url: base + '/message/save',
                    type: 'post',
                    data: {conId: _this.conId, msg: textContent},
                    success: function (result) {
                        $('#con' + _this.conId).html(textContent);
                    }, error: function () {

                    }
                })
            }
        }
    }
})

// 消息内容
function showModal(conId) {
    // 获取消息内容
    MsgContent.conId = conId;
    MsgContent.init()
    $('#myModal').modal('show');
}


// 流加载
layui.use('flow', function () {
    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
    var flow = layui.flow;
    flow.load({
        elem: '#demo' //指定列表容器
        , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
            var lis = [];
            //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
            $.post('/api/list?page=' + page, function (res) {
                //假设你的列表返回在data集合中
                layui.each(res.data, function (index, item) {
                    lis.push('<li>' + item.title + '</li>');
                });

                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                next(lis.join(''), page < res.pages);
            });
        }
    });
});